<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia';
import { requestSynthesizeSearchResult } from '../../../utils/axiosURL'
import useSearchHistory from '../../../store/searchHistory';

// 请求关键字
const { keyword_Store } = storeToRefs(useSearchHistory())
// 存储歌单数据
let saveSongListData = ref<any>([])
// 歌单数量
let songListCount = ref<number>(0)
// 请求歌单所有评论的页码
let allCommentPage = ref<any>(1)

onMounted(() => requestSynthesizeSearchResultFn())
// 请求歌单
const requestSynthesizeSearchResultFn = () => {
    requestSynthesizeSearchResult(keyword_Store.value, 1000, 30, allCommentPage.value).then((data: any) => {
        // console.log(data, '请求歌单');
        saveSongListData.value = data.result.playlists
        songListCount.value = data.result.playlistCount
    }).catch(_ => { })
}
const changePages = () => requestSynthesizeSearchResultFn()

</script>


<template>
    <div class="songListWrap">
        <div class="songListItem" v-for="item in saveSongListData" v-if="saveSongListData.length !== 0">
            <div class="leftWrap">
                <router-link :to="`/SongListDetail/${item.id}`">
                    <img :src="item.coverImgUrl" alt="">
                </router-link>
            </div>

            <div class="rightWrap">
                <router-link :to="`/SongListDetail/${item.id}`">
                    <div class="title" :title="item.description">{{ item.description }}</div>
                    <div class="count">{{ item.trackCount }}首</div>
                    <div class="desc" :title="item.name">{{ item.name }}</div>
                    <div class="playCount">
                        {{ item.playCount >= 10000
                            ? Math.ceil(item.playCount / 10000000) + '亿'
                            : item.playCount >= 10000
                                ? Math.ceil(item.playCount / 10000) + '万'
                                : item.playCount }}
                    </div>
                </router-link>
            </div>
        </div>
        <AlibumListSkeleton v-else v-for="item in 10" />
        <div class="paging">
            <el-pagination small background layout="prev, pager, next" :total="songListCount"
                v-model:current-page="allCommentPage" @current-change="changePages" />
        </div>
    </div>
</template>


<style lang="scss" scoped>
.songListWrap {
    width: 100%;

    .songListItem {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80px;
        border-radius: 6px;

        .leftWrap {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80px;
            height: 80px;

            img {
                width: 60px;
                height: 60px;
                border-radius: 6px;
            }
        }

        .rightWrap {
            flex: 1;
            height: 100%;

            a {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                height: 100%;

                >div {
                    font-size: $font-size-sm;
                    font-family: $activeTextFont;
                }

                .title {
                    flex-basis: 40%;
                    width: 290px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .count {
                    flex-basis: 10%;
                    color: $font_second_color;
                    text-align: center;
                }

                .desc {
                    width: 50px;
                    flex-basis: 30%;
                    color: $font_second_color;
                    text-align: center;
                }

                .playCount {
                    flex-basis: 20%;
                    color: $font_second_color;
                    text-align: center;
                }
            }
        }

        &:nth-child(even) {
            background-color: rgb(250, 250, 250);
        }

        &:hover {
            background-color: rgb(242, 242, 243);
        }
    }

    .paging {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 50px;

        :deep(.number) {
            border-radius: 4px;
            font-family: none;
            font-family: $textFont;
            background-color: transparent;
            border: 1px solid $lineColor;

            &:hover {
                color: $font_main_color;
                background-color: $BK_GRAY;
            }
        }

        :deep(.is-active) {
            background-color: $theme-red !important;
            border-radius: 4px;

            &:hover {
                color: $theme-white;
                background-color: $theme-red;
            }
        }

        :deep(.btn-prev),
        :deep(.btn-next) {
            border-radius: 4px;
            border: 1px solid $lineColor;
            background-color: transparent;

            &:hover {
                color: $font_red_color;
                background-color: $BK_GRAY;
            }
        }

        :deep(.more) {
            border-radius: 4px;
            border: 1px solid $lineColor;
            background-color: transparent;

            &:hover {
                color: $font_red_color;
                background-color: $BK_GRAY;
            }
        }
    }
}
</style>